{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
    {{ super() }}
    
	<!--Load the AJAX API--> 
	    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
	    <script type="text/javascript"> 
	 
	      // Load the Visualization API and the piechart package. 
	      google.load('visualization', '1.0', {'packages':['corechart']}); 
	 
	      // Set a callback to run when the Google Visualization API is loaded. 
	      google.setOnLoadCallback(drawVisualization); 
	      
		  function drawVisualization() {
		  {% if summary != "budget_null" %}
		      drawChartTotalByCategory();
		  {% endif %}
		  }	      
	 
	      // Callback that creates and populates a data table, 
	      // instantiates the pie chart, passes in the data and 
	      // draws it. 
	      function drawChartTotalByCategory() { 
	 
	        // Create the data table. 
	        var data1 = google.visualization.arrayToDataTable([ 
			{% for row in summary %}
				{% if loop.first %}
					['{{ row[0] }}','{{ row[1] }}', '{{ row[2] }}', '{{ row[3] }}', '{{ row[4] }}', '{{ row[5] }}', '{{ row[6] }}', '{{ row[7] }}', '{{ row[8] }}', '{{ row[9] }}', '{{ row[10] }}', '{{ row[11] }}', '{{ row[12] }}'],
				{% elif loop.last %}
					['{{ row[0] }}', {{ row[1] }}, {{ row[2] }}, {{ row[3] }}, {{ row[4] }}, {{ row[5] }}, {{ row[6] }}, {{ row[7] }}, {{ row[8] }}, {{ row[9] }}, {{ row[10] }}, {{ row[11] }}, {{ row[12] }}]
				{% else %}
					['{{ row[0] }}', {{ row[1] }}, {{ row[2] }}, {{ row[3] }}, {{ row[4] }}, {{ row[5] }}, {{ row[6] }}, {{ row[7] }}, {{ row[8] }}, {{ row[9] }}, {{ row[10] }}, {{ row[11] }}, {{ row[12] }}],
				{% endif %}
			{% endfor %}	        
       		]); 

	        // Set chart options 
	        var options1 = {'title':'TOTALES', 
	        			    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
	                       }; 
	 
	        // Instantiate and draw our chart, passing in some options. 
	        var chart1 = new google.visualization.ColumnChart(document.getElementById('chart_div1')); 
	        chart1.draw(data1, options1); 
	      } 
	    </script>
{% endblock %}
{% block content %}
	<br>
	<table>
		<tr>
			<td>
        		<!--Div that will hold the pie chart-->
        		<div id="chart_div1" style="width: 900px; height: 800px;"></div>
			</td>
		</tr>
	</table>
{% endblock %}
